﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    
<head>
    <link href="../css/quote2.css" rel="stylesheet" type="text/css" />
    <script src="../lib//jquery.js" type="text/javascript"></script>
    <!--<script src="../lib/ui.core.js" type="text/javascript"></script>-->
    <!--<script src="../lib/ui.slider.js" type="text/javascript"></script>-->
    <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]-->

    <script src="../js/ui/util.js" type="text/javascript"></script>
    <script src="../lib/mstar.flot.js" type="text/javascript"></script>
    <title>Untitled Page</title>
    <script type="text/javascript">
	var Cookies = {
     set: function(name, value) {
         var argv = arguments;
         var argc = arguments.length;
         var expires = (argc > 2) ? argv[2] : null;
         var path = (argc > 3) ? argv[3] : '/';
         var domain = (argc > 4) ? argv[4] : null;
         var secure = (argc > 5) ? argv[5] : false;
         document.cookie = name + "=" + escape(value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
     },
     get: function(name) {
         var arg = name + "=";
         var alen = arg.length;
         var clen = document.cookie.length;
         var i = 0;
         var j = 0;
         while (i < clen) {
             j = i + alen;
             if (document.cookie.substring(i, j) == arg)
                 return Cookies.getCookieVal(j);
             i = document.cookie.indexOf(" ", i) + 1;
             if (i == 0)
                 break;
         }
         return null;
     },

     clear: function(name) {
         if (Cookies.get(name)) {
             var expdate = new Date();
             expdate.setTime(expdate.getTime() - (86400 * 1000 * 1));
             Cookies.set(name, "", expdate);
         }
     },

     getCookieVal: function(offset) {
         var endstr = document.cookie.indexOf(";", offset);
         if (endstr == -1) {
             endstr = document.cookie.length;
         }
         return unescape(document.cookie.substring(offset, endstr));
     }
 };
	</script>


</head>
<body>
<div class="demo">

<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider" style="width:955px; height:35px"></div>

</div><!-- End demo -->

<div class="demo-description">

<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>
<input type="button" value ="set Value" onclick="changeOption()"/>
</div><!-- End demo-description -->
<script>
var flotObj;
var data = [
{data:[[1,80],[3,20],[5,40],[7,50],[9,60]],lines:{show:true},yaxis:1,color:0}
]                   
function getOption(){
    return { xaxis: { mode:null,tickSize:2,showLabel:true,labelWidth:50,labelHeight:8,posStyle:"inner"},       
                       yaxis: {labelWidth:0,labelHeight:12,showLabel:0,autoscaleMargin: 0.02,ticks:[]},        
                       lines:{fill:true,showHelp:true}
           };
}
function draw() {
    if (flotObj == null) {
        flotObj = new mstar.flot("slider",getOption());
    }
    flotObj.init(data);
}
var container = document.getElementById("slider");
var slider = new Util.Silder(container,{min:100,max:500, values:[200,300]});
slider.onchange = function(values) {
    $("#amount").val('$' + values[0] + ' - $' + values[1]);
}
	draw();
function changeOption() {    
   slider.setOption({min:0,max:1000,values:[300,500]});
}
	//$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
	
</script>
</body>
</html>
